<div>
    <div>
        <div class="bg-white padding">
            <button type="button" class="btn btn-white btn-sm" v-on:click="_openNewDbLinkModal()">
                新建连接
            </button>
            <button type="button" class="btn btn-white btn-sm margin-left-sm" v-on:click="_newDataBase()">
                新建数据库
            </button>
            <button type="button" class="btn btn-white btn-sm margin-left-sm" v-on:click="_newDbQuery()">
                新建查询
            </button>
            <button type="button" class="btn btn-white btn-sm margin-left-sm" v-on:click="_newTable()">
                新建表
            </button>
            <button type="button" class="btn btn-primary btn-sm margin-left-sm" v-on:click="_customKeypress()">
                运行
            </button>
            <span class="margin-left">当前数据库：{{mysqlClientInfo.curDbName}}</span>
        </div>
    </div>
    <div class="row padding">
        <div class="col-md-2 bg-white " style="min-height: 600px; border-right:8px solid #F3F3F4">
            <h3 class="margin-top">数据库</h3>
            <div class=" span-line margin-bottom-sm" style="cursor:pointer;display: flex; flex-direction: row; justify-content: space-between;" v-for="(item,index) in mysqlClientInfo.dbLinks">
                <div>
                    <img src="/img/mysql.png" style="width: 13px;" />
                    <span class="margin-left-xs" @click="_chooseDb(item)">{{item.name}}</span>
                </div>
                <div>
                    <img src="/img/editDb.png" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 13px;" />
                    <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
                        <p style="margin:0px 0;">
                            <a href="javascript:void(0)" v-on:click="_openEditDbLinkModal(item)">修改</a>
                            <span>|</span>
                            <a href="javascript:void(0)" v-on:click="_openDeleteDbLinkModal(item)">删除</a>
                            <span>|</span>
                            <a href="javascript:void(0)" v-on:click="_openViewDbTablesModal(item)">查看表</a>
                        </p>
                    </div>
                </div>

            </div>
            <div class=" " v-if="!mysqlClientInfo.dbLinks || mysqlClientInfo.dbLinks.length <1">
                <span class="margin-left-xs">请先添加数据库</span>
            </div>
        </div>

        <div class="col-md-10 padding-xs bg-white " style="min-height: 600px;width: 100%;">
            <div class="">
                <ul class="nav nav-tabs">
                    <li class="nav-item" v-for="(item,index) in mysqlClientInfo.sqlTabs">
                        <a class="nav-link" v-bind:class="{active:mysqlClientInfo._currentTab.id == item.id}" 
                        v-on:click="changeTab(item)">{{item.name}}
                        <i class="fa fa-trash" aria-hidden="true" @click.stop="_deleteTab(item,index)"></i>
                    </a>
                    </li>
                    <li class="nav-item" v-if="!mysqlClientInfo.sqlTabs ||mysqlClientInfo.sqlTabs.length <1">
                        <a class="nav-link" class="active">请新建查询</a>
                    </li>
                </ul>
            </div>
            <div>
                <textarea type="text" id="text" class="text" v-model="mysqlClientInfo._currentSql" @keyup.ctrl.66="_customKeypress()" placeholder="请输入sql，选中sql语句，ctrl+B运行" style="width: 100%; background-color: #FFF; min-height: 400px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; color: green; font-size: 16px;border: solid 0px;outline:none;"></textarea>
            </div>
            <div v-if="mysqlClientInfo.data && mysqlClientInfo.data.length>0" style="overflow:auto;width:100%;max-height: 500px;">
                <table class="table table-bordered border-primary" style="white-space:nowrap;table-layout: fixed;word-break:break-all;"  width="100%" data-page-size="15">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center" width="150" v-for="(cols,index) in mysqlClientInfo.dataCols">{{cols}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="data in mysqlClientInfo.data">
                            <td class="text-center" @dblclick="_openViewDbDataModel(data)" width="150" style="white-space: nowrap;overflow: hidden;" v-for="(item,index) in mysqlClientInfo.dataCols">{{data[item]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-if="mysqlClientInfo.error" style="width: 100%; word-break:break-all;">
                <span style="color: red;">{{mysqlClientInfo.error}}</span>
            </div>
        </div>

    </div>
    <vc:create path="admin/newDbLink"></vc:create>
    <vc:create path="admin/editDbLink"></vc:create>
    <vc:create path="admin/deleteDbLink"></vc:create>
    <vc:create path="admin/viewDbData"></vc:create>
    <vc:create path="admin/newDataBase"></vc:create>
    <vc:create path="admin/viewDbTables"></vc:create>
    <vc:create path="admin/newTable"></vc:create>

</div>